<template>
	<view style='padding-bottom: 200rpx;'>
		<u-navbar title='仓库监控' :autoBack="true" leftIconColor="#1E272E" bgColor="transparent"
			:titleStyle="{fontWeight:700,fontSize:'32rpx',color:'#1E272E'}"></u-navbar>
		<view class="bgHome"></view>
		<view class="videoList">
			<view class="flex alignItem bewteen" style="margin-bottom: 50rpx;width: 65vw;">
				<view class="label" style="width:160rpx;color: #333;">发货仓库：</view>
				<uni-data-select
					style="width: 80%;"
				     v-model="areaCameraValue"
				     :localdata="areaCameraList"
				     @change="change"
				   ></uni-data-select>
			</view>
			<view v-if="videoList.length>0">
			<view class="item" v-for="(v,i) in videoList" :key="i"  v-if="show">
				<video :autoplay="true" :id="myVideo+'i'" v-if='v.videoUrl && v.showRealVideo' :src="v.videoUrl" style="width: 700rpx;height: 395rpx;"></video>
				 <!-- 伪装播放按钮（未加载时显示） -->
				<view v-if="v.videoUrl && !v.showRealVideo" style="width: 700rpx;height: 305rpx;background-color: #eee;display: flex;justify-content: center;align-items: center;" @click="initVideo(i)">
				  <view class="play-icon" style="font-size: 40rpx;color: #333;">▶</view>
				</view>
				<view v-if="!v.videoUrl">
					<image src='https://renovationcdn.jiachuangnet.com/novideo.jpg'  style="width: 700rpx;height: 305rpx"></image>
					<view style="text-align: center;height: 90rpx;line-height: 90rpx;color:#e6e6e6">当前店铺暂无实时画面</view>
				</view>
				<view style="padding: 30rpx 20rpx;font-size: 32rpx;font-weight: 700;;border-top:0.5px solid #eee;">{{v.serialNumber}}</view>
			</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	let app = getApp();
	import newTabbar from '@/components/newTabbar/index.vue';
	export default{
		components:{
			newTabbar
		},
		data(){
			return{
				keyword:'',
				videoList:[],
				show:true,
				areaCameraList:[],
				total:0,
				areaCameraValue:null,
			}
		},
		onShow(){
			this.show = true;
			this.getAreaCameraList()
		},
		onHide(){
			this.show = false;
			this.videoList = [];
		},
		methods:{
			initVideo(i){
				this.videoList[i].showRealVideo=true
			},
			change(){
				this.show = false;
				this.searchHandler()
			},
			getAreaCameraList(){
				uni.$u.http.get('/camera/getAreaCameraList').then(res=>{
					if(res){
						this.areaCameraList=res.map(item=>{
							return {
								value:item.areaId,
								text:item.areaName
							}
						})
						if(this.areaCameraList.length){
							this.areaCameraValue=this.areaCameraList[0].value
							this.searchHandler()
						}
					}
				})
			},
			searchHandler(){
				this.videoList = [];
				uni.$u.http.get('/camera/getAreaAllCamera', {
					 params:{
						areaId:this.areaCameraValue,
					 }
				}).then(res=>{
					if(res){
						this.show=true
						this.videoList = res.map(item=>{
							return {
								...item,
								showRealVideo:false,
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgHome{
		height: 360rpx;
		width: 750rpx;
		background: linear-gradient(135deg, #029DD9, #01CF9C);
	}
	.videoList{
		width: 700rpx;
        margin:0 auto;
		margin-top:-150rpx;
	}
	.item{
		width: 700rpx;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
		overflow: hidden;
	}
	.search{
		width: 650rpx;
		padding:0 25rpx;
		height: 78rpx;
		background-color: white;
		border-radius: 78rpx;
		display: flex;
		align-items: center;
		
	}
</style>